// 所有react项目都要有
import react, { Component, Fragment } from 'react';
// 虚拟DOM、JSX解析器
import reactDom from 'react-dom';

import propTypes from 'prop-types';

// 引入样式表
import './index.css';

// 组件的运用：组合、嵌套。
class App extends Component {
  render() {
    return (
      <>
        <h1>计数器</h1>
        <Count />
      </>
    );
  }
}

class Count extends Component {
  constructor(props) {
    super(props); // 处理属性，这是一个默认方法。
    this.state = {
      count: 0
    };
    this.sub = this.sub.bind(this); // 方法4：绑定事件处理程序的this
  }

  add = () => {
    // 这3个操作，会被react放在一个更新周期（16ms）内。
    this.increment(); // this.state.count 为 0
    this.increment(); // this.state.count 为 0
    this.increment(); // this.state.count 为 0
    // 虽然执行了3次，结果只是计算的是一次，值为1。
  };

  increment = () => {
    console.log('increment()');

    // setState() 方法是异步执行的。
    // 给setState()方法直接传值，实现不了效果。
    // this.setState({
    //   count: this.state.count - 1
    // });

    // 给setState()传一个函数，这样的话，每次获取最新的state值。
    this.setState((state) => {
      return {
        count: state.count + 1
      };
    });
  };

  sub() {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (
      <>
        <p>记数：{this.state.count}</p>
        <p>
          <button onClick={this.add}>+</button>
          <button onClick={this.sub}>-</button>
        </p>
      </>
    );
  }
}

reactDom.render(<App />, document.getElementById('root'));
